<!--自定义组件-->

<template>
  <div class="w-h-full" >
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <DComponent v-bind="previewData" :id="component.id"/>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'

  import Vue from 'vue'
  import axios from 'axios'
  Vue.prototype.$axios = axios

  const _this = {
    name: 'DynamicCustomComponent', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin],
    attr: {
      version: '1.1',
      configDataTemp: Object.assign({

        shareCustomCompId: '',
        shareCustomCompName: '',
        shareCustomCompThumbnail: '',
        shareCustomCompIsShare: '0',
        shareCustomCompUploaderUsername: '',

        sourceData: {
          js: '() => {\n' +
              '  return {\n' +
              '    data() {\n' +
              '      return {}\n' +
              '    },\n' +
              '    mounted() {},\n' +
              '    methods: {},\n' +
              '    computed: {},\n' +
              '    watch: {}\n' +
              '  }\n' +
              '}',
          template: '<template>\n' +
              '  <div>\n' +
              '  \t<p class="msg">自定义组件</p>\n' +
              '  </div>\n' +
              '</template>',
          css: '.msg{\n' +
              '  font-size: 30px;\n' +
              '}',
        }

      })
    },
    data() {
      return {

      }
    },
    created() {
      if (this.component.compConfigData.shareCustomCompId) {
        this.$PnApi.ShareCustomCompApi.getShareCustomCompById(this.component.compConfigData.shareCustomCompId).then(result => {
          if (result.data.success) {
            let data = result.data.payload
            this.component.compConfigData.sourceData.js = data.script_code
            this.component.compConfigData.sourceData.template = data.template_code
            this.component.compConfigData.sourceData.css = data.style_code
          }
        })
      }
    },
    mounted() {

    },
    methods: {

    },
    computed: {
      previewData() {
        return {
          js: this.component.compConfigData.sourceData.js,
          template: this.component.compConfigData.sourceData.template,
          css: this.component.compConfigData.sourceData.css,
        }
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
